<!-- 首页 -->
<template>
	<view>
		<view class="home-box">
			<!-- banner -->
			<view class="box">
				<swiper class="swiper" @change="bannerChange" :current="swiperDotIndex" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item class="swiper-item" v-for="(item, index) in bannerInfo" :key="index">
						<view class="banner-item">
							<image :src="item.url" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
				<view class="banner-dot">
					<view v-for="(item, index) in bannerInfo" class="banner-dot-item" :key='index'
						:class="index == bannerIndex ? 'banner-dot-item-active':''"></view>
				</view>
			</view>
			<!-- 应用功能 -->
			<apply></apply>
		</view>
		<!-- 最新公告 -->
		<view class="notice" v-if="noticeInfo.length !== 0">
			<view class="title">
				<view>最新公告</view>
				<view @click="moreNotice()">查看更多 <u-icon name="arrow-right" color="#1585FC" size="28"></u-icon>
				</view>
			</view>
			<notice :noticeInfo="noticeInfo"></notice>
		</view>
	</view>
</template>

<script>
	import Notice from '@/components/notice/notice.vue'; // 最新公告列表
	import Apply from '@/components/apply/apply.vue'; // 应用功能
	import {
		getNotices
	} from '@/api/notices.js'; // 小区公告接口
	import {
		getListStoresByCommunity
	} from '@/api/common';
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		IMG_URL
	} from '@/utils/request.js'
	import {
		removeTAG
	} from '@/utils/StringUtil.js'
	export default {
		components: {
			Notice,
			Apply
		},
		data() {
			return {
				bannerInfo: [{
						url: '../../../static/index/banner01.png',
					},
					{
						url: '../../../static/index/banner01.png',
					},
					{
						url: '../../../static/index/banner01.png',
					}
				],
				autoplay: true,
				interval: 5000,
				duration: 1000,
				bannerIndex: 0,
				current: 0,
				swiperDotIndex: 0,
				noticeInfo: [], //公告列表
				viewAutoplay:false
			}
		},
		onLoad() {

		},
		onShow() {
			this.getNotices();
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		methods: {
			...mapActions('user', ['isLogin']),
			/**
			 * 切换banner图时
			 */
			bannerChange(e) {
				this.bannerIndex = e.target.current
			},
			/**
			 * 获取公告列表
			 */
			getNotices() {
				var data = {
					communityId: this.userCommunity.communityId,
					page: '1',
					row: '5',
					noticeTypeCd: '1001'
				}
				var that = this
				getNotices(data).then((res) => {
					console.log('获取公告列表', res)
					that.noticeInfo = res.notices
					// 因后端未返回发布人的名字和头像，暂使用默认
					for (let i = 0; i < that.noticeInfo.length; i++) {
						that.noticeInfo[i].headPortrait = '@/static/portrait.png'
						if (that.noticeInfo[i].photo !== undefined) {
							that.noticeInfo[i].img = IMG_URL + that.noticeInfo[i].photo.url
						} else {
							that.noticeInfo[i].img = '' //默认图片
						}
						that.noticeInfo[i].text = removeTAG(that.noticeInfo[i].context) //简介
					}
				}).catch(function(reason) {
					that.noticeInfo = []
				})
			},
			/**
			 * 查看更多
			 */
			moreNotice() {
				uni.navigateTo({
					url: '/pages/home/notice/notice'
				})
			}
		}
	}
</script>

<style lang="scss">
	.home-box {
		border-radius: 0 0 30rpx 30rpx;
		background-color: #FFFFFF;
		min-height: 300rpx;
		overflow: hidden;
	}

	.box {
		background-color: #FFFFFF;
		position: relative;
	}

	.banner-item {
		height: 276rpx;
		overflow: hidden;
		margin: 0 auto;
	}

	.banner-item image {
		width: 100%;
		height: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		width: calc(100% - 64rpx) !important;
		height: calc(100% - 20rpx) !important;
		padding: 10rpx 32rpx;
	}

	.banner-dot {
		display: flex;
		position: absolute;
		left: 50%;
		bottom: 25rpx;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		z-index: 9999;
	}

	.banner-dot-item {
		width: 26rpx;
		height: 9rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		margin-right: 10rpx;
	}

	.banner-dot-item:last-of-type {
		margin-right: 0;
	}

	.banner-dot-item-active {
		background-color: rgba(255, 255, 255, 0.65);
	}

	/* 应用功能 */
	.apply-box {
		margin-top: 24rpx;
		padding: 0 32rpx;
		display: flex;
		flex-direction: column;
	}

	.apply-box .menu {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.apply-text {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.apply-text>view:nth-child(1) {
		width: 70rpx;
		height: 70rpx;
	}

	.apply-text>view:nth-child(2) {
		color: $uni-text-color;
		font-size: 24rpx;
	}

	/* 最新公告 */
	.notice {
		margin-top: 40rpx;
		padding: 0 32rpx;
	}

	.notice>.title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 4rpx 16rpx 4rpx 0;
		margin-bottom: 10rpx;
	}

	.notice>.title>view:nth-child(1) {
		flex: 1;
		font-size: 36rpx;
		font-weight: bold;
		background-image: url(../../../static/b-zxggbj.png);
		background-size: 40rpx 40rpx;
		background-repeat: no-repeat;
		background-position: top right;
	}

	.notice>.title>view:nth-child(2) {
		flex: 3.5;
		font-size: 24rpx;
		color: #1585FC;
		display: flex;
		align-items: center;
		justify-content: flex-end
	}
</style>
